<template>
		<view class="uni-flex uni-row" style="background-color: #FFFFFF;width: 100%;border-radius: 10upx;border: 1rpx solid #f0edf3;">
			<view class="text" style="flex: 6;">
				<view class="position-sticky1 bigbox1" >
					 <view class="box1">
						 
					 <view style="font-size: 22upx;">
						 	 大盘指数
						 </view>
						 <view class="pricebox">
							 {{info.nowprice}}
						 </view>
					 </view>
					 <view class="box2">
						 <view>
						 	<text class="tmbox">日</text>
							
							
							<uni-icons type="arrowthinup" color="#a22c32" size="11" v-if="info.upp>0"/>
							<uni-icons type="arrowthindown" color="#009e00" size="11" v-else/>
							
						 	<text style="color: #a22c32;font-size: 20upx;" v-if="info.upp>0">{{info.upp}}%</text>
							<text style="color: #009e00;font-size: 20upx;" v-else>{{info.upp}}%</text>
						 </view>
						 
					 	<view>
							<text class="tmbox">周</text>
						<uni-icons type="arrowthinup" color="#a22c32" size="11" v-if="info.weekup>0"/>
						<uni-icons type="arrowthindown" color="#009e00" size="11" v-else/>
						
						
						<text v-if="info.weekup>0" style="color: #a22c32;font-size: 20upx;">{{info.weekup}}%</text>
						<text v-else style="color: #009e00;font-size: 20upx;">{{info.weekup}}%</text>
						
						
						
						
						</view>
						<view>
							<text class="tmbox">月</text>
							<uni-icons type="arrowthinup" color="#a22c32" size="13" v-if="info.mup>0"/>
							<uni-icons type="arrowthindown" color="#009e00" size="13" v-else/>
							
							
							<text v-if="info.mup>0" style="color: #a22c32;font-size: 20upx;">{{info.mup}}%</text>
							<text v-else style="color: #009e00;font-size: 20upx;">{{info.mup}}%</text>
						
						</view>
					
					 </view>
						
				</view>
			</view>
			<view class="text" style="-webkit-flex: 1;flex: 4;">
				
				<view  style="border-left: 1upx solid #ebebeb;">
				
					<view >
					<text class="tmbox">市场热度:</text>
					<text style="color: #a22c32;font-size: 20upx;">{{info.hot}}</text>
					</view>
					<view >
					<text class="tmbox">较昨日</text>
					
					<uni-icons type="arrowthinup" color="#a22c32" size="11" v-if="info.upfy>0"/>
					<uni-icons type="arrowthindown" color="#009e00" size="11" v-else/>
					
					
					<text v-if="info.upfy>0" class="frontcolor" style="color: #a22c32;font-size: 20upx;">{{info.upfy}}%</text>
					<text v-else tyle="color: #009e00;font-size: 20upx;">{{info.upfy}}%</text>
					
					
					
					</view>
					<view >
					<text class="tmbox">较上周</text>
					<uni-icons type="arrowthinup" color="#a22c32" size="11" v-if="info.upfw>0"/>
					<uni-icons type="arrowthindown" color="#009e00" size="11" v-else/>
					
					
					
					<text v-if="info.upfw>0" class="frontcolor" style="color: #a22c32;font-size: 20upx;">{{info.upfw}}%</text>
					<text v-else tyle="color: #009e00;font-size: 20upx;">{{info.upfw}}%</text>
				
				</view>
					
					</view>
			</view>
		</view>
	
</template>

<script>
	export default {
		name: 'lPrice',
		props: {
			info: {},
		},
		mounted() {
			//this.loadData();
		},
		data() {
			return {
				hot:0
			};
		},
		methods: {
			loadData(){
				
					uni.request({
						url: this.webUrl+'/mqhot', //仅为示例，并非真实接口地址。
						data: '',
						dataType: 'json',
						method: 'get',
						header: {
							'content-type': 'application/json' // 微信默认就是
						},
						success: res => {
							if (res.statusCode !== 404) {
								console.log(res.data );
								
								this.hot=res.data.hot;
								
							} else {
							
								console.log("数据没有");
							}
						}
					});
					
				
			}
		}
	}
</script>

<style lang='scss'>
	$bg-color: #a22c32;
	.frontcolor{
		color: $bg-color;
	}
	
	.bigbox1{
		text-align: left;
		.pricebox{
			font-size: 40upx;
			
			padding-bottom: 6upx;
		}
		.tmbox{
			padding: 0upx 16upx;
			
			
		}
		.tmbox1{
			padding: 6upx;
			
			
		}
		.box1{
			width: 60%;
	
			text-align: center;
			margin-left: 20upx;
			margin-right: 20upx;
			padding-top: 8upx;
			
		}
		.box2{
			width: 42%;
			font-size: 24upx;
			
		}
		
	}
	.bigbox2{
		font-size:24upx;
		float: right;
		padding-right: 50upx;
		.barred{
			width: 30%;
			height: 14upx;
			
		}
		.bargrey{
			width: 30%;
			background-color:#555;
			height: 14upx;
		}
		.bargreen{
			width: 30%;
			background-color:green;
			height: 14upx;
		}
		
	}
	.position-sticky {
		/* 定义flex容器 */
		display: flex;
		flex-direction:row ;
		align-items: baseline;
		border-top: 1px solid #edeaef;
		width: 100%;
	}
	.position-sticky1 {
		/* 定义flex容器 */
		display: flex;
		flex-direction:row ;
		align-items: baseline;
	}
	  

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.flex-item {
		width: 50%;
	}

	.flex-item-V {
		width: 100%;
	}

	.text {
		margin: 5rpx 5rpx;
		padding: 0 5rpx;
		line-height: 70rpx;
		color: #777;
		font-size: 26rpx;
	}

	
</style>
